<!--业务分析-排行版-->
<template>
  <div class="contain contain-echart">
    <!-- <div class="ana-tit-list cf bus-ana-tit txt-center">
      <div class="f-l bus-anadate">
        <datetime v-model="valueStart" @on-change="change">{{valueStart}}</datetime>
        <i class="iconfont icon-screen"></i>
      </div>
      <span>至</span>
      <div class="f-r bus-anadate">
        <datetime v-model="valueEnd" @on-change="changeEnd">{{valueEnd}}</datetime>
        <i class="iconfont icon-screen"></i>
      </div>
    </div>
    <ul class="displayflex bus-rank-total">
      <li class="flex1">
        <p>回款(元)</p>
        <em>123</em>
      </li>
      <li class="flex1">
        <p>销量</p>
        <em>123</em>
      </li>
    </ul>
    <div class="bus-ana-tit cf">
      TOP10
      <div class="ana-tit-list f-r">
        <label><input type="radio" value="" name="type" @click="" checked="checked"><span>回款</span></label>
        <label><input type="radio" value="" name="type" @click=""><span>销量</span></label>
      </div>
    </div>
    <div class="bus-ana-rank"  @click="goDet">
      <div class="displayflex bar-box">
        <div class="flex1 bus-msg-box">
          <div class="displayflex bus-msg" v-if="type==1">
            <p class="flex1 name">业务员名称</p>
            <em>￥234.00</em>
          </div>
          <div class="displayflex bus-msg" v-if="type==2">
            <p class="flex1 name">客户名称</p>
            <em>￥234.00</em>
          </div>
          <div class="bus-percent"><span class="cur" style="width:30%;"></span></div>
        </div>
        <i class="iconfont icon-more" v-if="type==2" @click="goDet"></i>
      </div>
    </div> -->
    <div id="bigEchart" class="is-echart change cur"
         :style="{ width: activeHeight + 'px', height: activeWidth + 'px' }"></div>
  </div>
</template>

<script>
import echarts from "$static/echarts/echarts.common.min.js";
export default {
  name:'cusrank',
  data() {
    return {
      // valueStart:'',
      // valueEnd:'',
      orderAnalysis: [],
      BuyerBill: [],
      BuyerAmount: [],
      BuyerName: [],
      activeWidth:0,
      activeHeight:0,
    }
  },
  computed:{
    //业务员还是商品
    // type(){
    //   return this.$route.query.type
    // }
  },
  created(){
    this.activeWidth = $(window).width(),
    this.activeHeight = $(window).height();
     
  },
  mounted() {
    this.$nextTick(function() {
      this.getDataBuyer();
    })
  },
  methods: {
    // setToday () {
    //   let now = new Date()
    //   let cmonth = now.getMonth() + 1
    //   let day = now.getDate()
    //   if (cmonth < 10) cmonth = '0' + cmonth
    //   if (day < 10) day = '0' + day
    //   let today = now.getFullYear() + '-' + cmonth + '-' + day;
    //   this.valueStart = today;
    //   this.valueEnd = today;
    // },
    // goDet(){
    //   if(this.type==2){
    //     this.$router.push({
    //       path:'/indexMan/detail'
    //     })
    //   }else{
    //     return false;
    //   };
    // }
    getDataBuyer() {
      var _this = this;
      var date = new Date();
      var info = JSON.parse(localStorage.userinfo);
      var queryTop = {
        TenantGUID: info.TenantGUID,
        CorpGuid: info.CorpGuid,
        month: date.getMonth() + 1,
        year: date.getFullYear(),
        day: ""
      };
      this.Ajax.post("CustomerSaleTopApi", queryTop).then(function(resp) {
        if (resp.IsSuccess) {
          resp.Datas.forEach(element => {
            _this.BuyerAmount.push(element.DetailSum);
            _this.BuyerBill.push(element.Qty);
            _this.BuyerName.push(element.MedName);
          });
          _this.echarts();
        }
      });
    },
    echarts() {
      var self = this;
      var myChart = echarts.init(document.getElementById("bigEchart"));
      var labelShow = {
              normal: {
                  show: true,
                  position: 'top',
                  color:'#333333'
              }
          };
      var option1 = {
            color: ["#f3b0ac", "#cbeff1"],
            legend: {
              data: ["销量(单)", "金额(元)"],
              // selected: {
              //   '销量(单)': true,
              //   '金额(元)': false
              // }
            },
            calculable: true,
            xAxis: [
              {
                type: "category",
                axisTick: { show: false },
                data: self.BuyerName
              }
            ],
            yAxis: [
              {
                type: "value"
              }
            ],
            series:[
              {
                name: "销量(单)",
                type: "bar",
                label: labelShow,
                barMinHeight: 5,
                data: self.BuyerBill
              },
              {
                name: "金额(元)",
                type: "bar",
                label: labelShow,
                barMinHeight: 5,
                data: self.BuyerAmount
              }
            ]
          };
      myChart.setOption(option1);
    },
  },
}
</script>